<template>
	<view class="relative_1">
		<headerNav :navRightIcon="false" leftIconColor="#fff" title="群信息" title-color="#ffffff">
		</headerNav>
		<view class="relative_1" style="margin: 20rpx auto;background-color: #FFFFFF;box-sizing: border-box;padding:30rpx;border-radius: 20rpx;width: 92%;">
			<view style="overflow: hidden;" class="flex">
				<view style="width: 112rpx;overflow: hidden;">
					<image :src="info.avatar" style="width: 112rpx;height: 112rpx;border-radius: 50%;display: block;" mode=""></image>
				</view>
				<view class="flex-1" style="padding: 10rpx 0 0 26rpx;">
					<view style="color: #000000;font-size: 30rpx;font-weight: 600;line-height: 50rpx;" class="yihang">
						{{info.name || ''}}
					</view>
					<view style="color: #666;font-size: 24rpx;line-height: 50rpx;" class="yihang">
						{{info.introduction || ''}}
					</view>
				</view>
			</view>
		</view>
		<view class="relative_1" style="width: 92%;margin: 26rpx auto 30rpx;background-color: #FFFFFF;border-radius: 20rpx;padding: 26rpx 30rpx 36rpx;box-sizing: border-box;">
			<view style="line-height: 36rpx;overflow: hidden;" class="pb20">
				<text style="color: #333;font-size: 32rpx;font-weight: 600;float: left;">
					群成员
				</text>
				<text @click="qun_chengyuan" style="color: #999999;font-size: 24rpx;float: right;">
					查看{{member_num || ''}}名群成员<text style="margin-left: 6rpx;font-size: 26rpx;" class="iconfont icon-xiangyou"></text>
				</text>
			</view>
			<view class="yuan_box">
				<view v-for="(item,index) in member" :key='index' style="width: 80rpx;text-align: center;margin-right:34rpx;float: left;">
					<image :src="item.avatar" style="width: 80rpx;height: 80rpx;border-radius: 50%;display: block;margin: 0 auto;" mode=""></image>
					<view style="text-align: center;font-size: 24rpx;color: #000;line-height: 40rpx;" class="yihang">
						{{item.name || ''}}
					</view>
				</view>
				<view @click="yaoqing" style="width: 80rpx;text-align: center;float: left;">
					<image src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230510/3d98af307ea153ac71ec300a2829c036.png" style="width: 80rpx;height: 80rpx;border-radius: 50%;display: block;margin: 0 auto;" mode=""></image>
					<view style="text-align: center;font-size: 24rpx;color: #000;line-height: 40rpx;">
						邀请
					</view>
				</view>
			</view>
		</view>
		<!-- <view style="width:88%;margin: 40rpx auto 20rpx;line-height: 40rpx;color: #999999;font-size: 24rpx;">
			群聊信息
		</view> -->
		<view style="width: 92%;margin: 0rpx auto;background-color: #FFFFFF;border-radius: 20rpx;padding: 20rpx 40rpx;box-sizing: border-box;">
			<view style="width: 100%;">
				 <view style="line-height: 100rpx;display: flex;border-bottom: 1px solid #eee;">
					 <view style="flex: 1;color: #262D2C;font-size: 32rpx;">
						 群头像
					 </view>
					 <view style="flex: 3;overflow: hidden;">
						 <image v-if="group_admin==1" @click="chooseImage" :src="info.avatar" style="width:60rpx;height: 60rpx;border-radius: 50%;display: block;float: right;margin-top: 18rpx;" mode=""></image>
						 <image v-if="group_admin!=1" :src="info.avatar" style="width:60rpx;height: 60rpx;border-radius: 50%;display: block;float: right;margin-top: 18rpx;" mode=""></image>
					 </view>
				 </view>
				 <view style="line-height: 100rpx;display: flex;border-bottom: 1px solid #eee;">
				 	<view style="flex: 1;color: #262D2C;font-size: 32rpx;">
				 		群聊名称
				 	</view>
				 	<view style="flex: 3;color: #262D2C;font-size: 28rpx;text-align: right;" class="yihang">
				 		<input :disabled="group_admin!=1" v-model="info.name" type="text" style="width: 100%;height: 60rpx;padding: 20rpx 0;text-align: right;" placeholder-style="color:#999;" placeholder="请输入群名称">
				 	</view>
				 </view>
				 <view style="line-height: 100rpx;display: flex;border-bottom: 1px solid #eee;">
				 	<view style="flex: 1;color: #262D2C;font-size: 32rpx;">
				 		群介绍
				 	</view>
				 	<view style="flex: 3;color: #262D2C;font-size: 28rpx;text-align: right;" class="yihang">
				 		<input :disabled="group_admin!=1" v-model="info.introduction" type="text" style="width: 100%;height: 60rpx;padding: 20rpx 0;text-align: right;" placeholder-style="color:#999;" placeholder="请输入群介绍" >
				 	</view>
				 </view>
				 <view style="line-height: 100rpx;display: flex;">
				 	<view style="flex: 2;color: #262D2C;font-size: 32rpx;">
				 		我在本群的昵称
				 	</view>
				 	<view style="flex: 3;color: #262D2C;font-size: 28rpx;" >
				 		<input type="text" placeholder-style="color:#999;" v-model="user_member.name" style="width: 100%;height: 60rpx;padding: 20rpx 0;text-align: right;" placeholder="未设置">
				 	</view>
				 </view>
			</view>
		</view>

		<view v-if="group_admin==1" @click="admin_xiugai" style="width: 690rpx;height: 98rpx;background: #1FB0AC;border-radius: 49rpx;line-height: 98rpx;text-align: center;color:#ffffff;font-size: 32rpx;font-weight: 500;margin:48rpx auto 0;">
			修改群信息
		</view>
		<view v-if="group_admin!=1" @click="user_xiugai" style="width: 690rpx;height: 98rpx;background: #1FB0AC;border-radius: 49rpx;line-height: 98rpx;text-align: center;color:#ffffff;font-size: 32rpx;font-weight: 500;margin:48rpx auto 0;">
			修改昵称
		</view>
		<view v-if="group_admin==1" @click="jiesan" style="width: 690rpx;height: 98rpx;background: #FFFFFF;border-radius: 49rpx;line-height: 98rpx;text-align: center;color:#666;font-size: 32rpx;font-weight: 500;margin:26rpx auto 0;">
			解散群聊
		</view>
		<view v-if="group_admin!=1" @click="tuichu_qun" style="width: 690rpx;height: 98rpx;background: #FFFFFF;border-radius: 49rpx;line-height: 98rpx;text-align: center;color:#666;font-size: 32rpx;font-weight: 500;margin:26rpx auto 0;">
			退出群聊
		</view>
		<uploadImg :singleNum="true" ref="uploadImg" v-model="info.avatar" permissionCameraContent="获取拍照权限是为了上传群头像" permissionAlbumContent="获取相册权限，是为了上传群头像" />
	</view>
</template>

<script>
	export default{
		data(){
			return{
				id:'',
				info:{
					avatar:''
				},
				member:[],
				user_member:{},
				group_admin:'',
				member_num:''
			}
		},
		onLoad(option) {
			this.id=option.id

		},
		onShow() {
			this.qz_xx()
		},
		methods:{
			// 上传图片
			chooseImage() {
				this.$refs.uploadImg.open()
			},
			// 群组信息
			qz_xx:function(){
				this.post('api/im/im/group_info',{group_id:this.id},true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.info=res.data.info
						this.member=res.data.member
						this.user_member=res.data.user_member
						this.group_admin=res.data.group_admin
						this.member_num=res.data.member_num
					}
				})
			},
			qun_chengyuan:function(){
				uni.navigateTo({
					url:'/sub/pages/qun_chengyuan?id='+this.id
				})
			},
			yaoqing:function(){
				uni.navigateTo({
					url:'/sub/pages/yaoqing?id='+this.id
				})
			},
			jiesan:function(){
				let that=this
				uni.showModal({
					title: '提示',
					content: '您确定要解散该群聊吗？',
					success: function (res) {
						if (res.confirm) {
							that.post('api/im/im/dissolve_group',{group_id:that.id},true).then(res=>{
								if(res.code==1){
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 1000
									})
									setTimeout(function(){
										uni.navigateBack({
											delta:1
										})
									},1500)
								}else{
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 1000
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			tuichu_qun:function(){
				let that=this
				uni.showModal({
					title: '提示',
					content: '您确定要退出该群聊吗？',
					success: function (res) {
						if (res.confirm) {
							that.post('api/im/im/quit_member',{group_id:that.id},true).then(res=>{
								if(res.code==1){
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 1000
									})
									setTimeout(function(){
										uni.navigateBack({
											delta:1
										})
									},1500)
								}else{
									uni.showToast({
										title: res.msg,
										icon: "none",
										duration: 1000
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			admin_xiugai:function(){
				let that=this
				this.post('api/im/im/set_group_info',{name:this.info.name,avatar:this.info.avatar,introduction:this.info.introduction,group_id:this.id},true).then(res=>{
					console.log(res)
					if(res.code==1){
						that.post('api/im/im/set_nickname',{name:this.user_member.name,group_id:this.id},true).then(ress=>{
							if(ress.code==1){
								uni.showToast({
									title: res.msg,
									icon: "none",
									duration: 1000
								})
								setTimeout(function(){
									that.qz_xx()
								},1500)
							}else{
								uni.showToast({
									title: res.msg,
									icon: "none",
									duration: 1000
								})
							}
						})
					}else{
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			},
			user_xiugai:function(){
				this.post('api/im/im/set_nickname',{name:this.user_member.name,group_id:this.id},true).then(res=>{
					if(res.code==1){
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
						setTimeout(function(){
							that.qz_xx()
						},1500)
					}else{
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5;
		padding-bottom: 40rpx;
		font-family: Demibold;
	}
	.yuan_box{
		overflow: hidden;
	}
	.yuan_box>view{
		margin-right: 6rpx;
		margin-bottom: 20rpx;
	}
	.yuan_box>view:nth-child(6n+6){
		margin-right: 0;
	}
</style>